<template>
  <b-col>
    <b-row class="p-3">
      <b-col class="pl-0 col-auto">
        <h4 style="font-family:HYZhengYuan-85S">
          发布的评论
        </h4>
      </b-col>
      <b-col v-if="loading" class="col-auto">
        <b-spinner variant="primary" type="grow" small />
      </b-col>
    </b-row>
    <!-- 循环体 -->
    <b-row v-for="issue in taIssue.data" :key="issue.id" class="mt-2 border-bottom">
      <b-col>
        <b-row class="py-2">
          <!-- 头像 -->
          <b-col class="pr-2 col-auto">
            <b-img-lazy rounded="circle" class="border" width="45" height="45"
              blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" :src="issue.user.headUrl" />
          </b-col>
          <b-col class="col-10">
            <!-- 名称和内容 -->
            <b-row>
              <b-col class="px-0">
                <b-link class="text-nowarp text-decoration-none">{{issue.user.name}}</b-link>
                <span v-if="issue.type == 'comment'|| issue.type ==  'article' || issue.type =='dynamic'" class=" ml-3 text-muted">评论了</span>
                <span v-else class="ml-3 text-muted">回复了</span>
              </b-col>
              <div class="w-100" />
              <b-col class="pl-0">
                <span>
                  {{issue.content}}
                </span>
              </b-col>
              <div class="w-100" />
              <!-- 学到一个新方法终于可以进行二次请求 可惜前面一直没这么写要改的话得花很多时间 -->
              <InfoView :info="issue" />
              <!-- 时间 和详情-->
              <div class="w-100" />
              <b-col class="pl-0 col-auto mt-1">
                <span class="text-muted">{{issue.time.year}}年{{issue.time.monthValue}}月{{issue.time.dayOfMonth}}日
                  {{issue.time.hour}}:{{issue.time.minute}}</span>
                <!-- <b-link class="iconfont icon-arrow-double-right text-decoration-none ml-3">查看详情</b-link> -->
              </b-col>
            </b-row>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 翻页 -->
    <b-row v-if="pagination.total!=null && taIssue.total > 5">
      <b-col>
        <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="pagination.baseURL" :value="this.taIssue.page" align="center" size="md"
          :number-of-pages="pagination.total" />
      </b-col>
    </b-row>
    <b-row v-if="taIssue.data!=null && taIssue.total <=5 && taIssue.total >0">
      <b-col class="text-center pb-2" style="font-family:HYZhengYuan-55S">
        <h5>到底咯</h5>
      </b-col>
    </b-row>
    <b-row v-if="pagination.total!=null&&pagination.total == 0">
      <b-col class="text-center pb-2" style="font-family:HYZhengYuan-55S">
        <h5>暂无内容</h5>
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
import tool from '@/utils/tool';
import InfoView from './InfoView'
export default {
  components: {
    InfoView,
  },
  props: {
    id: String,
  },
  data() {
    return {
      //页面内容
      taIssue: {
        data: null,
      },
      //加载圈
      loading: true,
      //分页组件
      pagination: {
        page: null,
        total: 1,
        baseURL: "/PersonPage/CommentCard?id=" + this.id + "&page=",
      }
    }
  },
  mounted() {
    this.updatePage(1, this.id);
  },
  beforeRouteUpdate(to) {
    this.loading = true;
    this.updatePage(to.query.page, to.query.id);
  },
  methods: {
    //页面更新
    updatePage(page, id) {
      this.$httpIssue.getUserComment(page, id).then((res) => {
        this.taIssue = res;
        this.pagination.page = res.page;
        this.pagination.total = Math.ceil(res.total / 5);
        this.loading = false;
      })
    },
    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },
  }
}
</script>
<style scoped>
.commentHim {
  border-left: 4px solid rgb(134, 134, 134);
}
</style>
